<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="file" multiple />
    <input type="button" value="读取文件" onclick="read()" />
</p>
<div id="result" style="width: 100%;">
    <!--显示读取的文件结果-->
</div>
<script type="text/javascript">
    /*自定义选取文件
    resolve：创建一个promise对象
    使用promise对象序列，需要使用promise类的静态方法-resolve，
    当参数值为promise对象时，会根据传入的promise对象复制一份
    当参数值为其他值时，会创建一个以这个值为肯定结果的promise对象
    不指定参数值，创建一个值为undefined，并以此作为肯定结果的promise对象
    reject：创建一个promise对象
    使用传入参数作为否定结果
    不指定参数值，创建一个以undefined为否定结果的promise对象*/
    var result = document.getElementById("result");
    var file = document.getElementById("file");
    var allData = "";
    function getData(file) {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            // 将文件以文本的形式读入
            reader.readAsText(file);
            reader.onload = function () {
                allData += this.result + "<br/>";
                resolve();
            };
            reader.onerror = () => reject();
        });
    }
    function get(file) {
        return getData(file).catch((err) => {
            alert("读取文件失败！");
            throw err;
        });
    }
    function getSequence() {
        let files = [];
        for (let i = 0, length = document.getElementById("file").files.length; i < length; i++) {
            files.push(document.getElementById("file").files[i]);
        }
        let sequence = Promise.resolve();
        files.forEach((file) => {
            sequence = sequence.then(() => get(file));
        });
        return sequence;
    }
    function read() {
        Promise.resolve().then(() => getSequence()).then(() => {
            let result = document.getElementById("result");
            result.innerHTML = allData;
        }).catch(() => console.log("读取文件发生错误！")).finally(() =>{
            console.log("读取文件完毕");
        })
    }
</script>
</body>
</html>